<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加抄送单位"
    top="30vh"
    width="800px"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-scrollbar max-height="60vh" v-loading="loading">
      <el-transfer
        v-model="selectedUnitIdList"
        :data="unitList"
        filterable
        :titles="['可选单位', '已选单位']"
      />
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import useUnitStore from '@/stores/unit'

const emit = defineEmits(['add'])
const unitStore = useUnitStore()

const dialogVisible = ref(false)
const loading = ref(false)

const unitList = computed(() => {
  return unitStore.list.map((item) => {
    return {
      key: item.id,
      label: item.name,
    }
  })
})

const selectedUnitIdList = ref([])

defineExpose({ show })

function show(rows?: any) {
  dialogVisible.value = true
  if (rows) {
    selectedUnitIdList.value = rows
  }
}

function close() {
  dialogVisible.value = false
  loading.value = false
  selectedUnitIdList.value = []
}

function submit() {
  loading.value = true
  emit('add', selectedUnitIdList.value)
  close()
}
</script>

<style scoped lang="scss">
:deep(.el-transfer) {
  --el-transfer-panel-width: 300px;
}

:deep(.el-transfer-panel .el-checkbox__inner:after) {
  height: 8px;
  left: 50%;
}
</style>
